import {Card, Descriptions, Image, Modal} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess} from "@/utils/utils";
import {OpReplyManager} from "@/services/api-functions";
import CommentList from "@/components/CommentList";

const WorkDetail: React.FC<any> = (props) => {
  const {match: {params: {type, id}}} = props;
  const [record, setRecord] = useState<any>(undefined)
  const [currentRow, setCurrentRow] = useState<any>(undefined);
  const [preview, setPreview] = useState<boolean>(false)
  const queryRecordDetail = (parentId: number) => {
    if (parentId) {
      OpReplyManager.secondReplyDetail({parentId}).then(({code, data}) => {
        if (isSuccess(code)) {
          setRecord(data??{})
        }
      })
    }
  }

  useEffect(() => {
    queryRecordDetail(id)
  }, [id])

  return (
    <PageContainer>
      <Modal visible={preview} onCancel={() => {
        setPreview(false);
        setCurrentRow(undefined)
      }}>
        <Image src={currentRow?.backgroundUrl}/>
      </Modal>
      <Card bordered={false}>
        <Descriptions title="评论详情" style={{marginBottom: 32}}>
          <Descriptions.Item label="评论ID">{id}</Descriptions.Item>
          <Descriptions.Item label="所属动态">{record?.title}</Descriptions.Item>
          <Descriptions.Item label="发布用户">{record?.userDto?.nickName}</Descriptions.Item>
          <Descriptions.Item label="评论状态">{record?.enabling?'启用中':'已禁用'}</Descriptions.Item>
          <Descriptions.Item label="获赞数">{record?.greatNum}</Descriptions.Item>
          <Descriptions.Item label="回复数">{record?.replyNum}</Descriptions.Item>
          <Descriptions.Item span={24} label="注册时间">{record?.gmtCreate ?? '-'}</Descriptions.Item>
          <Descriptions.Item span={24} label="评论内容">{record?.content ?? '-'}</Descriptions.Item>
        </Descriptions>
        <h3><strong>二级评论</strong></h3>
        <CommentList type={type} level={2} { ...props }/>
      </Card>
    </PageContainer>
  );
};

export default WorkDetail;
